<!-- 自定义配置 -->
<template>
  <div>
    <el-form-item label="配色选择">
      <avue-select v-model="main.activeOption.mapStyle"
                   :dic="dicOption.mapStyleList">
      </avue-select>
    </el-form-item>
    <el-form-item label="中心点设置">
      <div style="display: flex;">
        <span style="color: white; font-size: 12px;height: 30px; width: 50px;">经度： </span>
        <avue-input-number v-model="main.activeOption.lng"></avue-input-number>
      </div>
      <div style="display: flex;">
        <div style="color: white; font-size: 12px;height: 30px; width: 50px;">纬度： </div>
        <avue-input-number v-model="main.activeOption.lat"></avue-input-number>
      </div>
      <el-button size="mini" type="primary" @click="open">搜索</el-button>
    </el-form-item>
    <el-form-item label="zoom设置">
      <avue-input-number v-model="main.activeOption.zoom" placeholder="请输入默认的缩放级别"></avue-input-number>
    </el-form-item>
    <el-form-item label="地图显示要素">
      <el-checkbox-group v-model="main.activeOption.elements">
        <el-checkbox v-for="item in mapElements" :label="item.value" :key="item.value">{{item.label}}</el-checkbox>
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="zooms设置">
      <div style="display: flex;">
        <avue-input-number v-model="main.activeOption.zoomsMin"></avue-input-number>
        <div> ~ </div>
        <avue-input-number v-model="main.activeOption.zoomsMax"></avue-input-number>
      </div>
    </el-form-item>
    <el-form-item label="设备图标设置">
      <avue-input v-model="main.activeOption.markImg"></avue-input>
      <div style="height: 10px;width: 100%"></div>
      <el-upload class="upload-demo"
                 :on-success="onSuccess"
                 :headers="headers"
                 :show-file-list="false"
                 :action="imgUrl"
                 multiple
                 list-type="picture">
        <el-button size="small"
                   icon="el-icon-upload"
                   type="primary">上传图片</el-button>
      </el-upload>
    </el-form-item>
    <el-form-item label="Marker坐标请求参数">
                <el-button size="mini"
                           type="primary"
                           @click="openCode('markerQueryParam')">编辑</el-button>
              </el-form-item>
    <el-form-item label="Marker坐标参数">
                <el-button size="mini"
                           type="primary"
                           @click="openCode('markerConfig')">编辑</el-button>
              </el-form-item>
    <el-form-item label="InfoWindow坐标参数">
                <el-button size="mini"
                           type="primary"
                           @click="openCode('infoWindowConfig')">编辑</el-button>
              </el-form-item>
    <codeedit @submit="codeClose"
              :type="code.type"
              v-model="code.obj"
              :visible.sync="code.box"></codeedit><!--代码编辑器-->
    <el-dialog title="选择中心点" :visible.sync="dialogVisible" width="60%">
      <div style="width: 100%; height: 60vh;">
        <div class="search" style="padding: 1%; height: 100px;width: 300px; position: absolute;right: 5%; top: 100px; background-color: white;z-index: 9999;">
          <!-- <el-amap-search-box class="search-box" :center="center" :search-option="searchOption" :on-search-result="onSearchResult"></el-amap-search-box> -->
          <amap-search class="search-box" :center="center" :search-option="searchOption" :on-select="onSelect" :on-search-result="onSearchResult"></amap-search>
          <div style="width: 100%;height: 10px;"></div>
          <avue-input :value="centerStr"></avue-input>
        </div>
        <el-amap ref="map" :events="events"  vid="amapDemo" :zoom="zoom" :center="center" class="amap-demo">
          <el-amap-marker :position="marker.position"></el-amap-marker>
        </el-amap>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false;">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { dicOption } from '@/option/config'
import codeedit from '@/page/group/code';
import AmapSearch from '../amapSearch'
export default {
  inject: ["main"],
  components: {AmapSearch,codeedit},
  data(){
    return {
      code: {
        box: false,
        type: '',
        obj: '',
      },
      dicOption: dicOption,
      dialogVisible: false,
      imgUrl: '/jetlinks/file/static',
      headers:{
        "X-Access-Token": localStorage.getItem('x-access-token')
      },
      mapElements: [{value: 'bg', label: "区域面"},{value: 'road', label: "线/道路"},{value: 'point', label: "标注"},{value: 'building', label: "建筑物"}],
      center: [106.6096759,29.114],
      zoom: 15,
      marker: {
        position: [106.6096759,29.114]
      },
      searchOption: {
        city: '全国',
        citylimit: true
      },
      events: {
        click: (e) => {
          this.center = [e.lnglat.lng, e.lnglat.lat]
          this.marker.position = [e.lnglat.lng, e.lnglat.lat]
        }
      },
    }
  },
  methods:{
    onSuccess (res) {
      this.main.activeOption.markImg = res.result;
    },
    open () {
      if (this.main.activeOption.lng && this.main.activeOption.lat) {
        this.center = [this.main.activeOption.lng, this.main.activeOption.lat]
        this.marker.position = [this.main.activeOption.lng, this.main.activeOption.lat]
      }
      this.dialogVisible = true
    },
    onSelect(tip) {
      const {lng, lat} = tip.location
      this.center = [lng, lat]
      this.marker.position = [lng, lat]
    },
    onSearchResult (pois) {
      let latSum = 0
      let lngSum = 0
      console.log(pois)
      pois.forEach(poi => {
        lngSum += poi.lng
        latSum += poi.lat
      })
      let center = {
        lng: lngSum / pois.length,
        lat: latSum / pois.length
      }
      this.center = [center.lng, center.lat]
      this.marker.position = [center.lng, center.lat]
    },
    submit () {
      this.dialogVisible = false
      this.main.activeOption.lng = this.marker.position[0]
      this.main.activeOption.lat = this.marker.position[1]
    },
    codeClose (value) {
      this.main.activeOption[this.code.type] = value;
    },
    openCode (type) {
      this.code.type = type;
      this.code.obj = this.main.activeOption[type];
      this.code.box = true;
    },
  },
  computed: {
    centerStr: function() {
      return String(this.center)
    }
  }
}
</script>

<style scoped>
.search >>> input[type='text']{
  background-color: white !important;
  color: black !important;
  border-color: lightgray !important;
  box-shadow: 0 2px 2px rgba(0,0,0,.15);
}
.search-box{
  width: 100%;
  border: lightgray 1px solid !important;
}
.search-box >>> input[type='text']{
  background-color: white !important;
  color: black !important;
  border: none !important;
  box-shadow: none;
}
</style>
